<template >
    <div>
       <el-form :label-position="position" label-width="80px"  :model="ruleForm"  ref="ruleForm" :rules="rules">
             <!-- <div style="font-size: 16px;color: #666666; font-weight: bold;">基本信息</div>
               <el-row>
                <el-col :span="8">
                <el-form-item label="企业名字" >
                    <el-input autocomplete = "off"  minlength="2" maxlength="100" placeholder="请输入企业名字" />
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="企业类型" >
                        <el-select placeholder="请输入证件类型" >
                            <el-option label="营业执照" value="C01"></el-option>
                            <el-option label="组织机构代码" value="C09"></el-option>
                            <el-option label="社会信用代码" value="C15"></el-option>
                        </el-select>          
                    </el-form-item>
                </el-col>
            </el-row>
                <el-row>
                <el-col :span="8">
                    <el-form-item label="统一社会信用代码"  class="label-stlye">
                        <el-input autocomplete = "off" maxlength="18" placeholder="请输入统一社会信用代码"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系电话" >
                        <el-input autocomplete = "off"  maxlength="11" placeholder="请输入联系电话"/>
                    </el-form-item>
                </el-col>
            </el-row> -->
             <el-form-item label="企业名字1" prop="sss1">
                    <el-input autocomplete = "off" v-model="ruleForm.sss1"   placeholder="请输入联系电话" />
                </el-form-item>
               

                  <!-- <el-form-item label="企业名字" prop="sss1">
                    <div class="divclass">
                        <input class="inputio"   v-model="sss1"  type="text" placeholder="请输入验证码" > 
                      <button  id="lnkAddNew" @click="codeget" :disabled='disabledid'>获取验证吗</button>
                    </div>
                </el-form-item> -->

                <el-form-item label="企业名字" prop="sms_code">
                     <div class="sms">
          <input v-model="ruleForm.sms_code" type="text" class="ss" placeholder="请输入验证码"
            @blur="blurinput">
          <div class="content" @click="get_sms_code">{{content}}</div>
        </div>
                </el-form-item>


                <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
       </el-form>
    <el-button @click="next"> 下一步</el-button>
  
    </div>
</template>
<script>
export default {
    data () {
       var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else {
          callback();
        }
      };
        return {
            position:'left',
            disabledid:false,
            content:'获取验证吗',
            jgg:'jjjjjj',
              ruleForm:{
  sms_code: '',
   sss1:'',
              },
              rules:{
                  sms_code: [
            { required: true,validator: validatePass2, trigger: 'blur' },
           
          ],
             sss1: [
            { required: true, validator: validatePass2, trigger: 'blur' },
          ],
              }

        }
    },
    methods:{
next(){
   this.$router.push("/AllformFile");
},
codeget(){
    
     this.$message('这是一条消息提示'+this.disabledid);
    //  this.disabledid=true
},
blurinput(){
   this.$refs.ruleForm.validateField('sms_code');
//  this.$message('这是一条消blurinput------------示');
},
submitForm(ruleForm){
   this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
},

 }
}
</script>


<style lang="scss" scoped>
.el-input{
    width: 300px;
    height: 40px;

}
.divclass{
  width: 300px;
    height: 40px;   
    border-radius: 4px;
    // background-color: aqua;
    border: 1px solid red;
}
.inputio{
      border:0;
}
.sms{
  position: relative;
  width: 300px;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
}
.sms .content{
  position: absolute;
  top:0;
  right: 10px;
  color: orange;
//   border-left: 1px solid orange;
  padding-left: 10px;
  cursor: pointer;

}
.ss{
  width: 300px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  text-indent: 20px;
  font-size: 14px;
  margin-bottom: 20px;
}

.el-select .el-input {
    width: 130px;
  }
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>